<!--
<template>
  <div>
    <iframe width="100%" height="100%" :src="url" class="iframeClass"></iframe>
&lt;!&ndash;    <el-empty  description="暂无数据" />&ndash;&gt;
  </div>

</template>

<script>
    export default {
        name: "index",
      data(){
          return{
            url:"https://zjdr.vip/"
          }
      },
      created() {

      },
      methods:{
      skipUrl(){
        if(this.url.substr(0,7).toLowerCase() == "http://" || this.url.substr(0,8).toLowerCase() == "https://"){
          this.url=this.url
          window.location.href=this.url
        }else{
          this.url = "http://" + this.url;
          window.location.href=this.url
        }
      }
      }
    }
</script>

<style lang="scss" scoped>
.iframeClass{
  height: 100vh;
}
</style>
-->
<template>
  <div>
    <div style="border: 1px solid #ccc; ">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />
    </div>
    <el-button type="primary" @click="check">点击</el-button>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { SlateElement } from '@wangeditor/editor'
import axios from 'axios'
export default {
  name: "Test",
  components: { Editor, Toolbar },
  data(){
    return{
      editor: null,
      html: '',
      toolbarConfig: { },
      editorConfig: { MENU_CONF: {}, placeholder: "请输入内容..." },
      mode: 'default', // or 'simple'
    }

  },
  created() {
    this.editorConfig.MENU_CONF['uploadVideo'] = {
      // form-data fieldName ，默认值 'wangeditor-uploaded-video'
      fieldName: 'your-custom-name',

      // 单个文件的最大体积限制，默认为 10M
      maxFileSize: 5 * 1024 * 1024, // 5M

      // 最多可上传几个文件，默认为 5
      maxNumberOfFiles: 3,

      // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['video/*'],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: 'xxx',
        otherKey: 'yyy'
      },

      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      // 自定义增加 http  header
      headers: {
        Accept: 'text/x-json',
        otherKey: 'xxx'
      },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 30 秒
      timeout: 15 * 1000, // 15 秒

      // 视频不支持 base64 格式插入
      // 上传之前触发

                                     onBeforeUpload(file) {      // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file

        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },

      // 上传进度的回调函数

        onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },

      // 单个文件上传成功之后
        onSuccess(file, res) {          // JS 语法
        console.log(`${file.name} 上传成功`, res)
      },

      // 单个文件上传失败
        onFailed(file, res) {          // JS 语法
        console.log(`${file.name} 上传失败`, res)
      },

      // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {               // JS 语法
        console.log(`${file.name} 上传出错`, err, res)
      },

        async customUpload(file, insertFn) {
        console.log(file)// JS 语法
        // file 即选中的文件
        // 自己实现上传，并得到视频 url poster
        // 最后插入视频
          const files = new File([file], "file.jpg", {type: file.type, lastModified: Date.now()})
          let formData = new FormData();
          formData.append('file', files)
          axios.post('/file/editor/load', formData).then(r => {

            console.log(r)

            insertFn(r.data.data.url, "使用说明", r.data.data.url); //插入图片

          })

      }

    };
  },

  methods: {
    check(){
      console.log(this.html)
      this.editorConfig.MENU_CONF['uploadImage'] = {
        server: '/file/upload',
      }
    },


    onCreated(editor) {

      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    // setTimeout(() => {
    //   this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    // }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }

}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scope>

.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
  /* ...其他... */
}
</style>
